fashion-ssr-vue3/pages/blog/[slug].vue

<!-- @format -->

<script lang="ts" setup>
import dayjs from "dayjs"
import { getBlogsDetailApi, getReleaseBlogApi } from "~/api/model/blogs"
import { ConstKeys } from "~/enums/const-enums"

const route = useRoute()
const detail = ref<any>({})
const list = ref<any>([])
const page_size = ref(3)

const slug = route.params.slug
const { data, pending, error, refresh } = await useAsyncData(
  "blog-detail",
  () =>
    $fetch(`${ConstKeys.DOMAINPRO}/client/content/detail`, { params: { slug } }),
)
const seoData = data.value?.result

useHead({
  title: seoData?.contentTitle,
  meta: [
    {
      name: "description",
      content: seoData?.contentSubhead,
    },
    {
      property: "og:title",
      content: seoData?.contentTitle,
    },
    {
      property: "og:description",
      content: seoData?.contentSubhead,
    },
    {
      property: "og:image",
      content: seoData?.thumbnailUrl,
    },
    {
      property: 'og:url',
      content: `${ConstKeys.DOMAINPRO}/blog/${slug}`,
    },
    {
      property: "og:type",
      content: "website",
    },
    {
      property: "twitter:title",
      content: seoData?.contentTitle,
    },
    {
      property: "twitter:description",
      content: seoData?.contentSubhead,
    },
    {
      property: 'twitter:site',
      content: `${ConstKeys.DOMAINPRO}/blog/${slug}`,
    },
    {
      property: "twitter:image",
      content: seoData?.thumbnailUrl,
    },
    {
      property: "twitter:card",
      content: "summary_large_image",
    },
  ],
  link: [
    {
      rel: 'canonical',
      href: `${ConstKeys.DOMAINPRO}/blog/${slug}`,
    },
  ],
})

async function getNewBlogsList(
  params?: any,
  pageNo = 1,
  pageSize = page_size.value
) {
  const res: any = await getReleaseBlogApi({
    ...params,
    type: 1,
    pageNo,
    pageSize,
  })
  list.value = res.records
}
getNewBlogsList({
  orderBy: "createTime",
  orderType: "desc",
})

async function getVideoOrBlogsDetail() {
  const res = await getBlogsDetailApi({
    slug,
  })
  detail.value = res
}
getVideoOrBlogsDetail()
</script>

<template>
  <div class="blog-detail">
    <div class="py-100px pb-120px w-1400px m-auto px-65px">
      <h1 class="fw-700 text-40px lh-40px text-#363C40 custom-title-font">
        {{ detail.contentTitle }}
      </h1>
      <div class="mt-20px flex mb-42px text-16px text-#4d4d4d">
        <!-- <div class="flex">
          <div>Creator:</div>
          <div class="ml-10px text-#999999">
            {{ detail.createBy }}
          </div>
        </div> -->
        <!-- <div class="mx-10px b-r-1px b-r-solid b-r-#D8D8D8 h-20px" /> -->
        <div class="text-16px flex text-#666666">
          <div>Last Update: &nbsp;</div>
          {{ dayjs(detail?.createTime).format("MM/DD/YYYY") }}
        </div>
        <div
          v-if="detail.category_dictText"
          class="mx-10px b-r-1px b-r-solid b-r-#D8D8D8 h-20px"
        />
        <div class="text-#999999">
          {{ detail.category_dictText }}
        </div>
      </div>
      <div
        class="text-#333333 content-detail custom-html"
        v-html="detail.content"
      />
      <div class="mt-100px">
        <h2 class="fw-700 text-40px text-#3d3d3d !mb-60px custom-title-font">
          Here are some related articles you may find interesting:
        </h2>
        <div class="mt-70px grid grid-cols-3 gap-x-106px gap-y-65px">
          <div v-for="(item, index) in list" :key="index">
            <common-blog-item :item="item" />
          </div>
        </div>
      </div>
    </div>
    <AppFooter />
  </div>
</template>

<style lang="less" scoped>
.blog-detail {
  ::v-deep(.content-detail) {
    font-family: sans-serif;
    h2 {
      font-size: 1.5em;
      font-family: "CustomTitleFont";
      margin-top: 1em !important;
      margin-bottom: 1em !important;
      font-weight: bold;
    }
    h3 {
      display: block;
      font-size: 1.17em;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      margin-bottom: 1em !important;
      font-weight: bold;
      unicode-bidi: isolate;
      font-family: "CustomTitleFont";
    }
    p {
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      unicode-bidi: isolate;
    }
    ul {
      display: block;
      list-style-type: disc;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
      unicode-bidi: isolate;
      li {
        display: list-item;
        text-align: -webkit-match-parent;
        unicode-bidi: isolate;
      }
    }
    ol {
      list-style-type: decimal;
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
      unicode-bidi: isolate;
    }
  }
}
</style>